/**
 * This file will automatically be loaded by vite and run in the "renderer" context.
 * To learn more about the differences between the "main" and the "renderer" context in
 * Electron, visit:
 *
 * https://electronjs.org/docs/tutorial/application-architecture#main-and-renderer-processes
 *
 * By default, Node.js integration in this file is disabled. When enabling Node.js integration
 * in a renderer process, please be aware of potential security implications. You can read
 * more about security risks here:
 *
 * https://electronjs.org/docs/tutorial/security
 *
 * To enable Node.js integration in this file, open up `main.js` and enable the `nodeIntegration`
 * flag:
 *
 * ```
 *  // Create the browser window.
 *  mainWindow = new BrowserWindow({
 *    width: 800,
 *    height: 600,
 *    webPreferences: {
 *      nodeIntegration: true
 *    }
 *  });
 * ```
 */

import "./index.css";

import { OrbitControls } from "three/examples/jsm/Addons.js";
import {
  AxesHelper,
  Box3Helper,
  BoxGeometry,
  Euler,
  Mesh,
  MeshBasicMaterial,
  MeshDepthMaterial,
  PerspectiveCamera,
  Scene,
  SphereGeometry,
  Vector3,
  WebGLRenderer,
} from "three";
import { getBoundBox } from "./boundBox";
import { Pane } from "tweakpane";
//获取容器
const container = document.getElementById("app");

const scene = new Scene();

const camera = new PerspectiveCamera(
  45,
  container.clientWidth / container.clientHeight,
  0.1,
  1000
);

camera.position.set(100, 100, 100);

const renderer = new WebGLRenderer({
  antialias: true,
});
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; //开启阻尼
//渲染
const render = () => {
  renderer.render(scene, camera);
  controls.update();
};

const resize = () => {
  const width = container.clientWidth;
  const height = container.clientHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix(); // 更新相机的投影矩阵
  renderer.setPixelRatio(window.devicePixelRatio); // 设置像素比
  render();
};

window.addEventListener("resize", resize);

renderer.setAnimationLoop(render);

resize();

// //创建一个helper
const helper = new AxesHelper(100);
scene.add(helper);

//尝试创建两个模型盒子
const geometry = new BoxGeometry(10, 10, 10);
const material = new MeshBasicMaterial({ color: 0x00ff00, wireframe: false });
// const material = new MeshDepthMaterial();
const cube1 = new Mesh(geometry, material);
cube1.position.set(10, 0, 0);
cube1.rotation.set(0, Math.PI / 4, 0);
scene.add(cube1);

const cube2 = new Mesh(geometry, material);
cube2.position.set(10, 0, 10);
cube2.rotation.set(0, -Math.PI / 4, 0);
scene.add(cube2);

//提取box的中心点
// console.log(box)/;

// const center = box.getCenter(new Vector3());
// // const center = box.getCenter();
// const sphereGeometry = new SphereGeometry(2);
// const sphereMaterial = new MeshBasicMaterial({
//   color: 0xff0000,
//   depthTest: false,
//   depthWrite: false,
// });
// const sphere = new Mesh(sphereGeometry, sphereMaterial);
// sphere.position.copy(center);
// scene.add(sphere);

let boxHelper;
const updateBoundBox = (angle) => {
  const euler = new Euler(0, angle, 0);
  // return;
  const box = getBoundBox([cube1, cube2], euler);
  if (boxHelper) {
    scene.remove(boxHelper);
    boxHelper = null;
  }
  boxHelper = new Box3Helper(box);
  boxHelper.rotation.copy(euler);
  scene.add(boxHelper);
};

updateBoundBox(0);

const boundBoxOption = {
  angle: 0,
};
//创建一个操作面板
const pane = new Pane();
pane
  .addBinding(boundBoxOption, "angle", { min: 0, max: 360, step: 1 })
  .on("change", (res) => {
    updateBoundBox((res.value / 360) * 2 * Math.PI);
  });
